import { OauthClientDetailsType } from '@/datatypes/oauthClientDetails/data';
import { AuthModeValueEnum } from '@/enums/auth';
import { ProFormSelect, ProFormText, StepsForm } from '@ant-design/pro-components';
import { Modal } from 'antd';
import React from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<OauthClientDetailsType>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<OauthClientDetailsType>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            style={{
              padding: '32px 40px 48px',
            }}
            destroyOnClose
            title="更新"
            open={props.updateModalVisible}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
          clientId: props.values.clientId,
          clientSecret: props.values.clientSecret,
          accessTokenValidity: props.values.accessTokenValidity,
          refreshTokenValidity: props.values.refreshTokenValidity,
          additionalInformation: props.values.additionalInformation,
          authorizedGrantTypes: (props.values.authorizedGrantTypes || '').split(','),
        }}
        title="基本信息"
      >
        <ProFormText
          name="clientId"
          label="Client ID"
          placeholder="请输入ClientID"
          rules={[
            {
              required: true,
              message: 'ClientID为必填项',
            },
          ]}
        />
        <ProFormText
          name="clientSecret"
          label="Client Secret"
          placeholder="请输入ClientSecret"
          rules={[
            {
              required: true,
              message: 'ClientSecret为必填项',
            },
          ]}
        />
        <ProFormSelect
          name="authorizedGrantTypes"
          label="认证模式"
          placeholder="请选择认证模式"
          mode="multiple"
          valueEnum={AuthModeValueEnum}
          rules={[
            {
              required: true,
              message: '认证模式为必填项',
            },
          ]}
        />
        <ProFormText
          name="accessTokenValidity"
          label="AccessToken有效期"
          placeholder="请输入AccessToken有效期（秒）"
          rules={[
            {
              required: true,
              message: 'AccessToken有效期为必填项',
            },
          ]}
        />
        <ProFormText
          name="refreshTokenValidity"
          label="RefreshToken有效期"
          placeholder="请输入RefreshToken有效期（秒）"
          rules={[
            {
              required: true,
              message: 'RefreshToken有效期为必填项',
            },
          ]}
        />
        <ProFormText name="additionalInformation" label="附加信息" placeholder="请输入附加信息" />
      </StepsForm.StepForm>
    </StepsForm>
  );
};

export default UpdateForm;
